<template>
  <view class="reply-item">
    <image
      class="avatar"
      :src="reply.user.avatar"
    />
    <view class="reply-main">
      <view class="reply-header">
        <view class="header-left">
          <view class="username-row">
            <text class="username">{{ reply.user.name }}</text>
          </view>
          <text class="date">{{ reply.date }}</text>
        </view>
        <view class="header-right">
          <view
            class="action"
            @click="toggleLike"
          >
            <image
              class="icon"
              :src="
                liked
                  ? '/static/icon/like_icon_active.png'
                  : '/static/icon/like_icon.png'
              "
            />
            <text class="action-num">{{ likeCount }}</text>
          </view>
          <view
            class="action"
            @click="$emit('reply', reply.id)"
          >
            <image
              class="icon"
              src="/static/icon/comment_icon.png"
            />
          </view>
        </view>
      </view>
      <view class="reply-content">
        <text
          v-if="reply.replyTo"
          class="reply-to"
          >回复{{ reply.replyTo }}：</text
        >{{ reply.content }}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'ReplyItem',
    props: {
      reply: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        liked: this.reply.liked,
        likeCount: this.reply.likeCount
      }
    },
    methods: {
      toggleLike() {
        this.liked = !this.liked
        this.likeCount += this.liked ? 1 : -1
        this.$emit('like', this.reply.id)
      }
    }
  }
</script>

<style scoped lang="scss">
  .reply-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 12rpx;
  }
  .avatar {
    width: 52rpx;
    height: 52rpx;
    border-radius: 50%;
    margin-right: 16rpx;
    background: #eee;
  }
  .reply-main {
    flex: 1;
  }
  .reply-header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 4rpx;
  }
  .header-left {
    display: flex;
    flex-direction: column;
  }
  .username-row {
    display: flex;
    align-items: center;
  }
  .username {
    color: #333333;
    font-size: 26rpx;
    font-weight: 600;
    margin-right: 8rpx;
  }
  .date {
    color: #999999;
    font-size: 24rpx;
    margin-top: 2rpx;
  }
  .header-right {
    display: flex;
    align-items: center;
  }
  .action {
    display: flex;
    align-items: center;
    margin-left: 24rpx;
  }
  .icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 6rpx;
  }
  .action-num {
    color: #666666;
    font-size: 22rpx;
  }
  .reply-content {
    color: #333333;
    font-size: 26rpx;
    margin-bottom: 8rpx;
  }
  .reply-to {
    color: #2f7cff;
    font-size: 26rpx;
  }
</style>
